import React, { Component } from 'react'
import {Button, Input, Form, Message} from 'element-react'
import {withRouter} from 'react-router-dom'
import Breadcrumb from '../base/Breadcrumb'
import {FormWrapper} from '../base/BaseStatic'
import Select from '../base/Select'
// import styled from 'styled-components'

class operatingRecord extends Component {
  constructor (props) {
    super(props)
    this.state = {
      // 表单数据
      form: {
        userId: null,
        userName: null,
        orderId: null,
        applicationDescribe: null,
        applicationReason: null,
        applicationAmount: null
      },
      formEdit: {
        acceptAmount: null,
        handlerName: null,
        status: '已退款',
        remark: null,
        reviewStatusOptions: [
          {
            value: 'returning_money',
            label: '退款中'
          },
          {
            value: 'returned_money',
            label: '已退款'
          }
        ]
      }
    }
  }
  componentDidMount () {
    let data = JSON.parse(window.sessionStorage.getItem('refundItem'))
    this.setState({form: data})
    this.setState({formEdit: Object.assign({}, this.state.formEdit, {handlerName: data.handlerName, acceptAmount: data.acceptAmount})})
  }
  render () {
    return (
      <div>
        <Breadcrumb data={['售后', '编辑退款申请']}/>
        {/* 表单 */}
        <FormWrapper model={this.state.form} labelWidth="80">
          <Form.Item label="* 会员ID"><Input value={this.state.form.userId} disabled></Input></Form.Item>
          <Form.Item label="* 会员名"><Input value={this.state.form.userName} disabled></Input></Form.Item>
          <Form.Item label="* 订单号"><Input value={this.state.form.orderId} disabled></Input></Form.Item>
          <Form.Item label="* 申请类型"><Input value={this.state.form.applicationDescribe} disabled></Input></Form.Item>
          <Form.Item label="* 订单金额"><Input value={this.state.form.userId} disabled></Input></Form.Item>
          <Form.Item label="* 用户申请退款金额"><Input value={this.state.form.applicationAmount} disabled></Input>THB</Form.Item>
          <Form.Item label="* 申请原因"><Input value={this.state.form.applicationReason} disabled></Input></Form.Item>
        </FormWrapper>
        <FormWrapper model={this.state.formEdit} labelWidth="80">
          <Form.Item label="审核人"><Input
            placeholder="请输入审核人"
            value={this.state.formEdit.handlerName}
            disabled
          /></Form.Item>
          <Form.Item label="最终退款金额"><Input
            placeholder="请输入退款金额"
            value={this.state.acceptAmount}
            disabled
          />THB</Form.Item>
          <Form.Item label="审核状态">
            <Select options={this.state.formEdit.reviewStatusOptions} select={this.getReviewStatus.bind(this)}/>
          </Form.Item>
          <Form.Item label="审核备注"><Input
            type="textarea"
            autosize={{ minRows: 2, maxRows: 4}}
            placeholder="请输入审核备注"
            value={this.state.formEdit.remark}
            onChange={val => {this.getReviewNote(val)}}
          /></Form.Item>
          <Form.Item>
            <Button type="warning" size="large" onClick={() => {global.history.go(-1)}}>返回</Button>
            <Button type="success" size="large" onClick={this.submit.bind(this)}>提交</Button>
          </Form.Item>
        </FormWrapper>
      </div>
    )
  }
  // 提交回调
  submit () {
    let data ={
      "handlerId": this.props.match.params.id,
      "handlerName": this.state.formEdit.handlerName,
      "remark": this.state.formEdit.remark,
      "status": this.state.formEdit.status
    }
    this.$ajax.editRefundStatus(this.state.form.id, data).then(res => {
      if (res.code === 200) {
        Message({
          type: 'success',
          message: '提交成功'
        })
        global.history.go(-1)
      } else {
        Message.error('提交失败')
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  // getter
  // 审核状态的getter
  getReviewStatus (val) { this.setState({formEdit: Object.assign({}, this.state.formEdit, {status: val})}) }
  getReviewNote (val) { this.setState({ formEdit: Object.assign({}, this.state.formEdit, {remark: val}) }) }
}
export default withRouter(operatingRecord)